import React from 'react'
interface AboutState{
    message:string,
    count:number
}
class About extends React.Component<{},AboutState>{
    constructor(pros:any){
        super(pros)
        this.state = {
            message: 'Hello, World!',
            count:0,
        };

        console.log('constructor')
    }
    handleClick = ()=>{
        this.setState({ message: 'Hello, React!', count:this.state.count+1 },()=>{
           
            console.log(this.state.count)
        });
        console.log(this.state.count)
    }
    // handleReduce = () => {
    //     setTimeout(() => {
    //       console.log('reduce setState前的count', this.state.count);
    //       this.setState({
    //         count: this.state.count + 1
    //       });
    //       console.log('reduce setState后的count', this.state.count);
    //     }, 0);
    // }

    render(){
        console.log('render')
        return(
            <div>
                 <h1>{this.state.message}</h1>
                 <h1>{this.state.count}</h1>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
    componentDidMount(): void {
        console.log('componentDidMount')
    }
    componentDidUpdate(): void {
        console.log('componentDidUpdate','4444444444')
    }
    componentWillUnmount(): void {
        console.log('componentWillUnmount')
    }
}
export default About